<html>
  <head>
    <style type="text/css">
      body      { background-color: black; }
      a:hover   { text-decoration: none; }
      a:link    { color: black; }
      a:visited { color: black; }
      #main {
        position: absolute;
        left: 0%;
        top: 0%;
        width: 100%;
        height: 100%;
        padding: 0%;
        z-index: 10;
      }
    </style>
  </head>
  <body id="body">
  <script type="text/javascript">
    // Nominal original size. If the embed is smaller than this, the play and logo
    // images get scaled appropriately. These are actually 3/4 of the sizes suggested
    // by youtube, so the images don't get too tiny.
    defHeight = 258;
    defWidth = 318;

    function setup() {
        var width = document.body.clientWidth;
        var height = document.body.clientHeight;
        var canvas = document.getElementById("canvas");
        // Resize the canvas to the right size
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');
        var loadcount = 0;
        function doload() {
            if (++loadcount == 3) {
                // All images are loaded, so display them.
                // (Note that the images are loaded from javascript, so might load
                // after document.onload fires)

                playWidth = play.width;
                playHeight = play.height;
                logoWidth = logo.width;
                logoHeight = logo.height;
                var ratio = 1;
                // If the page is smaller than it 'should' be in either dimension
                // we scale the background, play button and logo according to the
                // dimension that has been shrunk the most.
                if (width / height > defWidth / defHeight && height < defHeight) {
                    ratio = height / defHeight;
                    // Stretch the background in this dimension only.
                    backgroundHeight = background.height / ratio;
                    ctx.drawImage(background, 0, 0, background.width, background.height,
                        0, (height - backgroundHeight) / 2, width, backgroundHeight);
                } else if (width / height < defWidth / defHeight && width < defWidth) {
                    ratio = width / defWidth;
                    backgroundWidth = background.width / ratio;
                    ctx.drawImage(background, 0, 0, background.width, background.height,
                        (width - backgroundWidth) / 2, 0, backgroundWidth, height);
                } else {
                    // In this case stretch the background in both dimensions to fill the space.
                    ctx.drawImage(background, 0, 0, width, height);
                }
                playWidth *= ratio;
                playHeight *= ratio;
                logoWidth *= ratio;
                logoHeight *= ratio;
                playLeft = (width - playWidth) / 2;
                playTop = (height - playHeight) / 2;
                ctx.drawImage(play, playLeft, playTop, playWidth, playHeight);
                ctx.globalAlpha = 0.7
                ctx.drawImage(logo, width - logoWidth, height - logoHeight, logoWidth, logoHeight);
                // To make it slightly easier to hit, the click target is twice the width/height of the unscaled play button
                targetLeft = width / 2 - play.width;
                targetRight = width / 2 + play.width;
                targetTop = height / 2 - play.height;
                targetBottom = height / 2 + play.height;

                canvas.addEventListener("click", function(e) {
                   var posx = e.clientX-canvas.offsetLeft;
                   var posy = e.clientY-canvas.offsetTop;
                   if (posx >= targetLeft && posx <= targetRight &&
                       posy >= targetTop && posy <= targetBottom) {
                       top.location.href = "vnd.youtube:VIDEO_ID";
                   }
               }, false);
            }
        }
        var background = new Image();
        background.onload = doload;
        background.src = "http://img.youtube.com/vi/VIDEO_ID/0.jpg";
        play = new Image();
        play.onload = doload;
        play.src = "play.png";
        logo = new Image();
        logo.onload = doload;
        logo.src = "youtube.png";
    }
    window.onload = setup;
  </script>
    <div id="main">
    <canvas id="canvas"></canvas>
    </div>
  </body>
</html>
